<template>
	<view class="page-index">
		

		
		<view class="p12">
			
			<view class="u-flex " style="flex-wrap:wrap;margin:0 -12rpx">
				<view style="width:50%;min-width:50%" v-for="(item,index) in dataList" :key="index" @click="toInfo(item)">
					<view class="p6">
						<image :src="item.mainImage" style="width: 100%;height: 400rpx;" mode="aspectFill"></image>
						<view>
							<view class="fz14">{{item.propertyName}}</view>
							<view class="fz12 mt6 c9 u-line-1">{{item.detailedAddress}}</view>
							<view class="u-flex u-f-jsb fz12 mt10">
								<span class="c6">承包总价</span>
								<span class="color-price">￥{{item.contractTotalPrice}}</span>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<u-loadmore :status="loadStatus"></u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				page:1,
				dataList: [],
				tabList:[{
					label:'综合'
				},{
					label:'新出房源'
				},{
					label:'在售房源'
				},{
					label:'已购房源'
				},]
			}
		},
		onShareAppMessage(e) {},
		// #ifdef MP-WEIXIN
		onShareTimeline() {

		},
		onShow() {},
		// #endif
		onLoad(e) {

this.initData()

		},

		onPageScroll(e) {},

		methods: {
			
			
			
			toInfo(item) {
				uni.navigateTo({
					url: '/pages/product/info?id=' + item.id
				})
			},
			initData() {
				this.page = 1
				this.dataList = []
				this.getData()
			
			},
			getData() {
				let post = {
					pageNo: this.page,
					pageSize: 20
				}
				this.$api.getMyCollect(post, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.dataList = [...this.dataList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.dataList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.nav-logo {
		position: fixed;
		top: 44px;
		left: 0;
		z-index: 10;
		padding: 20rpx 40rpx
	}

	.page-btn {

		position: absolute;
		bottom: 10px;
		left: 0;
		right: 0;
		z-index: 10;
		padding: 30rpx;
		text-align: center;


		.btn1 {

			text-align: center;
			color: #fff;
			display: inline-block;
			margin: 40rpx auto 0;
			padding: 12rpx 50rpx;
			background: #ABC7C9;
			border-radius: 40px;
		}

	}

	.page-index {
		position: relative;

		.item {
			position: relative;
		}

		.item-content {
			position: absolute;
			z-index: 1;
			color: #fff;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.btn {

			width: 144rpx;
			height: 50rpx;
			text-align: center;
			color: #fff;
			line-height: 50rpx;
			background: #ABC7C9;
			border-radius: 40px;
		}
	}

	.page-content {
		position: relative;
		z-index: 2
	}

	.btn-sure {

		width: 100%;
		height: 88rpx;
		text-align: center;
		color: #fff;
		margin: 0 auto;
		line-height: 88rpx;
		background: #ABC7C9;
		border-radius: 40px;
	}
</style>